<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <template v-for="item in optList">
        <el-tab-pane v-if="item.isShow" :key="item.code" :name="item.code">
          <span slot="label"><i :class="item.icon" /> {{ item.name }}</span>
        </el-tab-pane>
      </template>
    </el-tabs>
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      activeName: '',
      optList: []
    };
  },
  computed: {
    ...mapState({
      tenantId: state => state.user.tenantId
    }),
    key() {
      const $route = this.$route;
      let _path = null;
      if ($route.meta.animateKey) {
        _path = $route.meta.animateKey.split('/');
        _path = _path.map(item => {
          if (item.indexOf(':') > -1) {
            return $route.params[item.replace(':', '')];
          }
          return item;
        });
        _path = _path.join('/');
      }
      return _path || this.$route.path;
    }
  },
  watch: {
    '$route': {
      handler: function(val, old) {
        this.init();
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const $route = this.$route;
      this.gameId = this.$route.params.id;
      const _optList = [
        {
          code: 'TrainEdit',
          name: '培训编辑',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'TrainSubject',
          name: '创建科目',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'TrainExpenses',
          name: '费用设置',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'TrainSchedule',
          name: '日程安排',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'TrainLogisticsHotel',
          name: '后勤管理',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'TrainData',
          name: '数据管理',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'TrainExaminer',
          name: '考试官',
          icon: '',
          isShow: !!this.gameId
        },
        {
          code: 'TrainResult',
          name: '培训成绩',
          icon: '',
          isShow: !!this.gameId
        }
      ];
      this.activeName = $route.meta.activeTab || $route.name;
      this.optList = _optList;
    },
    handleClick(val) {
      const name = val.name;
      const { query } = this.$route;
      query.gameName = query.gameName || '';
      this.$router.push({
        name: name,
        params: {
          tenantId: 't__' + (this.tenantId || '')
        },
        query: query
      });
    }
  }
};
</script>
